<script setup lang="ts">
import { ref, onMounted } from 'vue'
import G6 from '@antv/g6'
import Mock from '@/views/mock/day2-fruchterman'
const mountNode = ref()

const init = () => {
  // 定义数据、实例化图、加载数据、渲染图
  const graph = new G6.Graph({
    container: mountNode.value,
    width: document.documentElement.clientWidth * 0.6,
    height: document.documentElement.clientHeight * 0.7,
    animate: true,
    modes: {
      default: ['drag-canvas', 'drag-node']
    },
    defaultNode: {
      size: 30
    },
    layout: {
      type: 'fruchterman',
      gravity: 5, // 重力的大小，影响布局的紧凑程度
      speed: 5, // 每次迭代节点移动的速度。速度太快可能会导致强烈震荡
      tick: () => {
        // 当节点位置发生变化时，刷新所有节点位置，并重计算边的位置。  刷新页面可直观看到布局的变化
        graph.refreshPositions()
      }
    },
    defaultEdge: {
      style: {
        lineWidth: 1,
        endArrow: {
          path: G6.Arrow.vee(5, 7, 0)
        }
      }
    }
  })
  // @ts-ignore
  graph.data(Mock) //  加载数据
  graph.render() // 渲染图
}

onMounted(() => {
  init()
})
</script>
<template>
  <div ref="mountNode" class="container" />
</template>

<style lang="scss" scoped>
.container {
  border: 4px solid #5b8ff9;
}
</style>
